// ========================================================
// list 列表元素UI
// ========================================================


@mixin list() {
    display: block;
    overflow: hidden;
    color: $item-default-text;
    position: relative;
    margin-bottom: $list-margin-bottom;
    background-color: $item-default-bg;
    @include retina-border(top bottom, $item-default-border);

    &.list-inset {
        @include retina-border-width(all);
        @include retina-border-radius($list-border-radius);
    }

    &.allact .item.active,
    .item[href].active {
        @include retina-border-width(bottom, 0);

        &:after {
            content: " ";
            position: absolute;
            z-index: -1;
            top: 0;
            height: 100%;
            left: -50%;
            width: 200%;
            background-color: $item-default-active-bg;
        }
    }

    .item {
        display: block;
        position: relative;
        z-index: $z-index-item;

        line-height: $item-line-height;
        min-height: $item-padding*2 + $item-line-height;

        font-size: $item-font-size;
        padding: $item-padding;
        @include retina-border(bottom, $item-default-border);

        &:last-child {
            border-bottom-width: 0;
            @include retina-border-width(bottom, 0);
        }

        &.item-inline {
            padding: $item-padding/3 $item-padding;
            min-height: $item-padding/3 + $item-line-height;
            border-bottom-width: 0;
        }

        &.inline-first {
            margin-top: $item-padding/3*1.5;
        }

        &.inline-last {
            margin-bottom: $item-padding/3*1.5;
        }

        .icon {
            color: $item-icon-color;
        }
    }
    &.list-embed {
        padding: 0 $item-padding;

        .item {
            padding: $item-padding 0;

            &.item-inline {
                padding: $item-padding/3 0;
            }
        }
    }
    &.list-embed-left {
        .item {
            padding-left: 0;
            margin-left: $item-padding;
        }
    }


    /*====================================================
     * item-input 相关代码
     *====================================================*/
    .item {
        &.item-input {
            padding: $item-inset-top-padding $item-padding;

            input {
                font-size: inherit;
            }
        }
    }


    /*====================================================
     * item-avator 相关代码
     *====================================================*/
    .item {
        &.item-avator,
        &.item-avator-large {
            .avator {
                border-radius: $list-border-radius;
                position: absolute;
                top: $item-padding;
                left: $item-padding;
                bottom: $item-padding;

                img {
                    width: 100%;
                }
            }

            .line {
                @include text-ellipsis();
                position: relative;

                &:first-of-type {
                    top: -$item-avator-fix;
                }

                &:last-of-type {
                    bottom: -$item-avator-fix;
                }
            }
        }

        &.item-avator {
            min-height: $item-padding*2 + $item-avator;
            padding-left: $item-padding*2 + $item-avator;

            .avator {
                width: $item-avator;
                height: $item-avator;
            }

            .line {
                line-height: $item-avator/2;
            }
        }

        &.item-avator-large {
            min-height: $item-padding*2 + $item-avator-large;
            padding-left: $item-padding*2 + $item-avator-large;

            .avator {
                width: $item-avator-large;
                height: $item-avator-large;
            }

            .line {
                line-height: $item-avator-large/3;
            }
        }
    }
    &.list-embed .item,
    &.list-embed-left .item {
        &.item-avator,
        &.item-avator-large {
            .avator {
                left: 0;
            }
        }

        &.item-avator {
            padding-left: $item-padding + $item-avator;
        }

        &.item-avator-large {
            padding-left: $item-padding + $item-avator-large;
        }
    }


    /*====================================================
     * label-left,icon-left 公用 相关代码
     *====================================================*/
    .item {
        &.label-left .label,
        &.icon-left .icon,
        &.icon-left .icon-small {
            position: absolute;
            left: $item-padding;
            top:50%;
            transform: translate(0,-50%);
        } 
    }
    &.list-embed .item,
    &.list-embed-left .item {
        &.label-left .label,
        &.icon-left .icon,
        &.icon-left .icon-small {
            left: 0;
        } 
    }


    /*====================================================
     * label-left 相关代码
     *====================================================*/
    .item {
        &.label-left {
            padding-left: $item-inset-left-padding;

            .label {
                display: block;
                width: $item-inset-left-padding - $item-padding;
                min-height: $item-line-height;
                line-height: $item-line-height;
            }
        }
    }


    /*====================================================
     * icon-left 相关代码
     *====================================================*/
    .item {
        &.icon-left {
            padding-left: $item-icon-padding;

            .icon {
                font-size: $item-icon-font-size;
            }
        }

        &.icon-small {
            padding-left: $item-icon-padding-small;

            .icon {
                font-size: $item-icon-font-small;
            }
        }
    }


    /*====================================================
     * icon-right,item-button-right 公用 相关代码
     *====================================================*/
    .item {
        &.icon-right .icon-right,
        &.item-button-right .button {
            position: absolute;
            right: $item-padding;
            top:50%;
            transform: translate(0,-50%);

            &:before {
                color: $item-icon-right-color;
            }
        }
    }
    &.list-embed .item {
        &.icon-right .icon-right,
        &.item-button-right .button {
            right: 0;
        }
    }
    

    /*====================================================
     * icon-right 相关代码
     *====================================================*/
    .item {
        &.icon-right {
            padding-right: $item-icon-right-padding;

            .icon-right {
                font-size: $item-icon-right-font-size;
            }
        }
    }


    /*====================================================
     * item-button-right 相关代码
     *====================================================*/
    .item {
        &.item-button-right {
            padding-right: $item-inset-left-padding;

            .button {
                font-size: $item-button-font-size;
                padding: 0 $item-button-padding;
                line-height: $item-button-height;
                min-height: $item-button-height;

                &.button-clear {
                    padding: 0;
                    font-size: $item-font-size;

                    &:before {
                        line-height: inherit !important;
                    }
                }
            }
        }
    }
}